<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>商品规格数量</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Place favicon.ico in the root directory -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="js/layui/css/layui.css">
        <script src="js/layui/layui.js"></script>
        <link rel="stylesheet" href="css/swiper.min.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/detail.css">
        <style>
        	
        </style>
	</head>
	<body >
	     <div class="my" style="background-color: #ffffff;">
			 <div  class="mian layui-carousel layui-col-xs12 layui-col-sm12 layui-col-md12" id="app">
				 <div class="layui-row tl-top">
					 <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 tl-leftalign">
						 <img src="img/img/icon_back.png"/>
					 </div>
					 <div class="layui-col-xs10 layui-col-sm10 layui-col-md10 tl-align">
						 商品详情
					 </div>
					 <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 tl-rightalign">
						 <img src="img/img/btn_share.png"/>
					 </div>
				 </div>
				 <div class="cent">
					 <div class="apple-banner">
						 <div class="swiper-container">
							 <div class="swiper-wrapper">
								 <div class="swiper-slide slide1">
									 <div class="title txt"> iPhone <br>
										 7  在此 </div>
								 </div>
								 <div class="swiper-slide slide2">
									 <div class="title txt"> <img src="img/logo_watch_large.png"> </div>
									 <h2 class="homepage-headline txt">Series 2 新登场。</h2>
								 </div>
								 <div class="swiper-slide slide3">
									 <div class="title txt"> <img src="img/logo_macbookpro_large.png">
										 <p> 一身才华，一触即发 </p>
									 </div>
								 </div>
							 </div>
							 <div class="swiper-button-prev"><span class="layui-icon nexIcon">&#xe602;</span></div>
							 <div class="swiper-button-next"><span class="layui-icon nexIcon">&#xe603;</span></div>
							 <ul class="swiper-pagination autoplay">
							 </ul>
						 </div>
					 </div>

				 </div>
				 <div class="layui-row tl-margin">
					 <div class="layui-col-md12 tl-font tl-clor">
						 卡哇伊水瓶座加水器你值得拥有
					 </div>
					 <div class="layui-col-md12 tl-integ">
						 <span>4396</span><i>积分</i>
					 </div>
					 <div class="layui-row">
						 <div class="layui-col-xs9 layui-col-sm9 layui-col-md9">
							 <div class="tl-clor tl-font12 tl-moeny">市场参考价:<i>123.00</i>元</div>
						 </div>
						 <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
							 <div class="tl-font12 tl-stock">库存:<i>4390</i>个</div>
						 </div>
					 </div>
				 </div>
				 <div class="tl-bg"></div>
				 <div class="tl-borbottom"></div>
				 <div class="tl-poslion">
					 <div class="layui-col-md12 layui-col-xs12 layui-col-sm12 tl-img">
						 <img src="img/img/btn_cancel.png"/>
					 </div>
					 <div class="layui-row tl-height">

						 <div class="layui-col-md1 layui-col-xs2 layui-col-sm1 tl-btn">
							 颜色:
						 </div>
						 <div class="layui-col-md11 layui-col-xs10 layui-col-sm11 tl-btn">
							 <div class="layui-row">
								 <div class="layui-col-md12 layui-col-xs12 layui-col-sm12 layui-btn-container">
									 <button class="layui-btn layui-btn-primary tl-vertical">尊贵白</button>
									 <button class="layui-btn layui-btn-primary tl-vertical">阳光橙</button>
									 <button class="layui-btn layui-btn-primary tl-vertical">深海蓝</button>
									 <button class="layui-btn layui-btn-primary tl-vertical">深海蓝</button>

								 </div>
							 </div>
						 </div>
					 </div>
					 <div class="layui-row tl-height tl-clerpadding">
						 <div class="layui-col-md1 layui-col-xs2 layui-col-sm1 tl-btn">
							 数量:
						 </div>
						 <div class="layui-col-md11 layui-col-xs10 layui-col-sm11 tl-btn">
							 <div class=" layui-row tl-cart">
								 <span class="tl-add"><img src="img/img/icon_-.png"/></span>
								 <input type="text" value="100" />
								 <span class="tl-del"><img src="img/img/icon_-.png"/></span>
							 </div>
						 </div>
					 </div>
				 </div>
				 <div class="layui-row tl-exchange">
					 <div class="layui-col-xs8 layui-col-sm8 layui-col-md8 tl-leftdiv tl-integ">
						 单价:
						 <span class="ti-mun">4290</span>
						 <i class="tl-tegral">积分</i>
					 </div>
					 <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 tl-text">
						 <button class="layui-btn tl-change">立即兑换</button>
					 </div>
				 </div>

			 </div>
		 </div>
    <script src="js/swiper.min.js"></script>
    <script src="js/apple.js"></script>
        <script>
            layui.use(['carousel', 'form'], function(){
                var layer = layui.layer,
                 carousel = layui.carousel,
                    form = layui.form;
                layer.msg('开始我们的代码开发');
                carousel.render({
                    elem: '#test1',
                    arrow: 'always',
                    width: '100%',
                    height: '200px'
                });
            });
        </script>
	</body>
</html>
